<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>编辑公司福利</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入通用css -->
    <link rel="stylesheet" href="../common/public.css" />
    <!-- 引入样式vant -->
    <link rel="stylesheet" href="../common/ui/vant-ui/ui.css" />
    <script src="../common/ui/vant-ui/ui.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent">
          <div class="pd20">
            <div class="flex jcsb">
              <div class="fwb ndis500"><van-icon name="arrow-left" size="20" /></div>
              <div class="dis500"></div>
              <div class="prColor">保存</div>
            </div>
            <div class="flex jcsb aic fs24 mgt20">
              <div class="fwb">编辑公司福利</div>
              <div><span class="prColor">{{ num }}</span>/{{ allNum }}</div>
            </div>
            <div class="fs14 mgt10">选择公司提供福利信息,以吸引更多求职者。</div>
          </div>
          <div class="tabs">
            <van-tabs
              v-model="active"
              background="none"
              color="#129250"
              line-width="13"
              @click="tabCk"
            >
              <van-tab v-for="(i,o) in fl" :title="i.type" :key="o"></van-tab>
            </van-tabs>
          </div>
          <div class="pd10">
            <div v-for="(i,index1) in fl">   
              <div :id="`md${index1}`"></div>
              <div class="fwb mgt20 mgb20">
                <span v-if="index1!=0">{{ i.type }}</span>
              </div>
              <div class="topSafe" v-if="index1==0"></div>
              <div v-for="(j,index2) in i.list">
                <van-cell
                  :title="j.name"
                  :icon="j.icon"
                  title-class="fwb fs14 flex aic"
                >
                  <template #icon>
                    <van-icon :name="j.icon" size="24" class="mgr8" />
                  </template>
                  <template #right-icon>
                    <div
                      class="utag"
                      v-if="!j.ischoose"
                      @click="ck(index1,index2)"
                    >
                      <van-icon name="plus" />
                    </div>
                    <div
                      class="utag utagActive"
                      v-else
                      @click="ck(index1,index2)"
                    >
                      <van-icon name="success" size="16" />
                    </div>
                  </template>
                </van-cell>
              </div>
            </div>
          </div>
        </div>
        <lan-adright></lan-adright>
      </div>
      <main-footer class="bd"></main-footer>
    </div>
  </body>
</html>
<style>
  body {
    background-color: #fff;
  }
  .tabs {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
  }
  .topSafe {
    --cut-height:0px;
    height: var(--cut-height);
  }
  .utag {
    padding: 0 15px;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    background-color: var(--primary-color);
    border-radius: 15px;
    color: #fff;
  }
  .utagActive {
    color: var(--primary-color);
    background-color: #fff;
    border: 1px solid var(--primary-color);
  }
</style>
<script>
  new Vue({
    el: "#app",
    data: {
      active: 0,
      num: 0,
      scroolList:[],
      showSafe:false,
      scroolTag:false,
      fl: [
        {
          type: '保险',
          list: [
            { name: "五险一金", icon: "search", ischoose: false },
            { name: "补充医疗保险", icon: "search", ischoose: false },
            { name: "意外险", icon: "search", ischoose: false },
            { name: "定期体检", icon: "search", ischoose: false },
          ],
        },
        {
          type: '薪资期权',
          list: [
            { name: "底薪加提成", icon: "search", ischoose: true },
            { name: "股票期权", icon: "search", ischoose: true },
            { name: "加班补助", icon: "search", ischoose: true },
            { name: "节假日加班费", icon: "search", ischoose: true },
            { name: "法定节假日三薪", icon: "search", ischoose: true },
            { name: "企业年金", icon: "search", ischoose: false },
            { name: "夜班补助", icon: "search", ischoose: false },
          ],
        },
        {
          type: '度假休假',
          list: [
            { name: "带薪年假", icon: "search", ischoose: false },
            { name: "员工旅游", icon: "search", ischoose: false },
          ],
        },
        {
          type: '生活补助',
          list: [
            { name: "包吃", icon: "search", ischoose: false },
            { name: "餐补", icon: "search", ischoose: false },
            { name: "零食下午茶", icon: "search", ischoose: false },
            { name: "团建聚餐", icon: "search", ischoose: false },
          ],
        },
      ],
    
    },
    components: {
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    watch:{
      scroolTag(val){
        if(val){
          window.removeEventListener('scroll', this.scroolW);
        }else{
          window.addEventListener('scroll',this.scroolW);
        }
      }
    },
    computed:{
      allNum(){
        let num = 0;
        this.fl.map(i=>{
          num += i.list.length;
        })
        return num;
      },
    },
    mounted() {
      window.addEventListener('scroll', this.scroolW);
      this.changeMap();
    },
    methods: {
      changeMap(){
        // 获取点击数
        this.fl.map((i) => {
        i.list.map((j) => {
          if (j.ischoose) {
            this.num++;
          }
        });
      });
        //获取锚点位置
        for(let i=0;i<this.fl.length;i++){
          let t = document.getElementById(`md${i}`).offsetTop-30;
          this.scroolList.push(t)
        } 
    },
      ck(ft, tip) {
        this.fl[ft].list[tip].ischoose = !this.fl[ft].list[tip].ischoose;
        if (this.fl[ft].list[tip].ischoose) {
          this.num++;
        } else {
          this.num--;
        }
      },
      tabCk() {
        this.scroolTag = true;
        let element = document.getElementById(`md${this.active}`);
        element.scrollIntoView({ behavior: "smooth" });
        setTimeout(()=>{
          this.scroolTag = false;
        },3000)
      },
      scroolW(){
        let that = this
        let w = window.scrollY;
        let slist = that.scroolList;
        let topSafe  = document.getElementsByClassName('topSafe')[0];
        if(w>200){
          topSafe.style.setProperty('--cut-height','35px')
        }else{
          topSafe.style.setProperty('--cut-height','0px')
        }
        that.scroolList.map((i,index)=>{
          if(w>i){
            that.active = index;
          }
        })
      }
    },
  });
</script>
